<template>
  <div id='pop'>
    <!-- 关闭所有监控弹窗 -->
    <div v-if="reload">
      <el-dialog :visible.sync="dialog"
                 width="1291px"
                 top='10vh'
                 class="dialog">
        <section class="dialog_header">
          <section>
            <div class="dialog_img">
              <img :src="video_message&&video_message.thum_pic">
            </div>
            
            <a :href="video_message&&video_message.url"
               target="_blank"><img src="@/assets/meng/hot_video18.png" style="width:20px;height:20px;margin:6px 0 0 4px;"></a>
          </section>
          <div>
            <div>
              <!-- <button v-if="video_message&&video_message.category">{{video_message.category}}</button> -->
              <span class="span01">{{video_message&&video_message.title}}</span>
              <el-popover placement="bottom"
                          trigger="hover"
                          popper-class="hot_video_popover">
                <vue-qr :size="150"
                        :margin="0"
                        v-if="video_message"
                        :auto-color="true"
                        :dot-scale="1"
                        :text="video_message.url" />
                <p>【抖音扫码，查看视频】</p>
                <img slot="reference"
                     src="@/assets/meng/hot_video13.png">
              </el-popover>
              <!-- <img src="@/assets/wang/video/collect.png"
                   v-if="true">
              <img src="@/assets/wang/video/collected.png"
                   v-else> -->
            </div>
            <div>
              发布时间：<span>{{timestamp(video_message&&video_message.release_time, 'Y-M-D h:m:s')}}</span>
              时长：<span>{{format_time(video_message&&video_message.duration)}}</span>
              数据更新时间：<span>{{timestamp(video_message&&video_message.create_time, 'Y-M-D h:m:s')}}</span>
            </div>
            <div>
              <img src="@/assets/meng/l.png">
              <span>{{format_num(video_message&&video_message.favorite_count)}}</span>
              <img src="@/assets/meng/c.png">
              <span>{{format_num(video_message&&video_message.comment_count)}}</span>
              <img src="@/assets/meng/s.png">
              <span>{{format_num(video_message&&video_message.share_count)}}</span>
            </div>
          </div>
        </section>
        <el-tabs v-model="active_name">
          <el-tab-pane label="视频详情"
                       name="0">
            <video01 v-if="active_name=='0'&&to_video01!=null"
                     :id='video_id'
                     :data="to_video01" />
          </el-tab-pane>
          <el-tab-pane label="观众分析"
                       name="1">
            <video02 v-if="active_name=='1'"
                     :id='video_id' />
          </el-tab-pane>
          <el-tab-pane label="电商分析"
                       v-if="video_message&&video_message.is_pro"
                       name="2">
            <video03 v-if="active_name=='2'"
                     @returnBack="show_pop"
                     :id='video_id' />
          </el-tab-pane>
          <el-tab-pane label="电商视频热度分析"
                       v-if="video_message&&video_message.is_pro"
                       name="3">
            <video04 v-if="active_name=='3'"
                     :id='video_id' />
          </el-tab-pane>
        </el-tabs>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import VueQr from 'vue-qr'
import video01 from './video01'
import video02 from './video02'
import video03 from './video03'
import video04 from './video04'
export default {
  name: 'pop',
  components: { video01, video02, video03, video04, VueQr },
  data() {
    return {
      reload: true,
      video_message: null,
      dialog: true,
      active_name: '0',
      to_video01: null,
      video_id: '',
    }
  },
  model: {
    prop: 'value',
    event: 'returnBack',
  },
  props: ['value', 'id', 'index'],
  filters:{
    lowestRootFilter(oNum){
      return oNum==1?'SVIP':oNum==2?'Plus':oNum==3?'体验版':oNum==4?'VIP':'免费版'
    }
  },
  created() {
    this.dialog = this.value
    this.active_name = this.index
    this.video_id = this.id

    this.$watch('dialog', function (newValue, oldValue) {
      this.$emit('returnBack', this.dialog)
    })
    this.get_data()
  },
  mounted() {},
  methods: {
    show_pop(parm) {
      this.video_id = parm
      this.get_data(true)
    },

    //   弹窗的视频详情
    get_data(parm) {
      let that = this
      this.$axios({
        method: 'get',
        url: '/api/aweme/detail',
        params: {
          awemeid: that.video_id,
        },
      })
        .then((response) => {
          if (response.data.code == 0) {
            // console.log(response.data.data)
            this.video_message = response.data.data.aweme
            this.to_video01 = response.data.data
            if (parm) {
              this.active_name = '0'
            }
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
  },
}
</script>
<style scoped lang='less'>
#pop {
  .dialog {
    .dialog_header {
      display: flex;
      // align-items: center;
      margin-bottom: 40px;
      > section:hover {
        > a {
          display: block;
        }
      }
      > section {
        // width: 50px;
        height: 50px;
        margin-right: 20px;
        position: relative;
          .dialog_img{
            width: 50px;
            height: 50px;
            border-radius: 6px;
            img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 4px;
          }
        }
        
        > a {
          width: 30px;
          height: 30px;
          display: block;
          position: absolute;
          top: 50%;
          cursor: pointer;
          left: 50%;
          transform: translate(-50%, -50%);
          display: none;
          img{
            width: 100%;
            height: 100%;
          }
        }
      }
      > div {
        > div:nth-child(1) {
          display: flex;
          align-items: center;
          button {
            font-size: 14px;
            background-color: #fff4ed;
            border-radius: 13px;
            border: solid 1px #fd7f2c;
            padding: 3px 11px;
            text-align: center;
            margin-right: 8px;
            box-sizing: border-box;
            color: #fd8a3e;
          }
          > .span01 {
            font-weight: 600;
            font-size: 14px;
            color: #222222;
            margin-right: 30px;
          }
          > img:last-child {
            margin-top: 3px;
          }
          img {
            width: 16px;
            height: 16px;
            margin-left: -15px;
            margin-top: -2px;
          }
        }
        > div:nth-child(2) {
          margin-top: 4px;
          margin-bottom: 16px;
          color: #888888;
          span {
            font-family: DINAlternate-Bold;
            font-size: 14px;
            color: #222222;
            margin-right: 30px;
          }
        }
        > div:nth-child(3) {
          display: flex;
          align-items: center;
          img {
            width: 17px;
            height: 15px;
            margin-right: 10px;
          }
          span {
            font-family: DINAlternate-Bold;
            margin-right: 50px;
            font-size: 16px;
            color: #222222;
          }
        }
      }
    }
    .el-tabs {
      min-height: 50vh;
    }
  }
}
</style>